<template>
	<view class="product-card" :class="{crystal:product.crystal}" :style="{marginBottom:bottom}">
		<image src="@/static/bg/product-bg.png" style="width:100%" mode="widthFix"></image>
		<view  class="media-card">
			<w-media :product='product' :width="280" @click.native='preview'></w-media>
		</view>
		<view class="goods-info" :style="{bottom:'-'+bottom}">
			<view class="info">
				<view class="pa-12 flex flex-ai-center flex-js-sb top">
					<view class="font-color-white flex flex-ai-center">
						<w-icon class="mr-8" size="19" :name="priceMap[product.crystal.crystal_type]"></w-icon>
						<text class="font-size-24">{{product.crystal?product.crystal.crystal_price:product.price }}</text>
					</view>
					<slot name="right"></slot>
				</view>
				<view class="bottom ptb-12 plr-12  flex flex-dir-col flex-js-sb">
					<text class="font-size-16 font-w-600 font-color-black text-overflow" style="width:100%">{{ product.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			product:{
				type:Object,
				defaul(){
					return {
						batch:{},
						issuer:{},
						series:{},
					}
				}
			}
		},
		data() {
			return {
				priceMap:{
					yellow:'hsj',
					purple:'zsj',
					blue:'lsj'
				},
				bottom:0,
			};
		},
		mounted() {
			this.$nextTick(()=>{
				this.computeHeight()
			})
		},
		methods:{
			preview(){
				uni.previewImage({
					urls:[this.$ossUrl+this.product['3d_url']],
					current:this.$ossUrl+this.product['3d_url']
				})
			},
			computeHeight(){
				let _this=this;
				uni.createSelectorQuery().in(this).select(".goods-info").boundingClientRect(({
					height
				}) => {
					_this.bottom=(height-63)+'px'
				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	
.product-card.crystal{
	.goods-info{
		.info{
			// height: auto;
		}
	}
}
	
.product-card{
	position: relative;
	.media-card{
		width: 750rpx;
		position: absolute;
		bottom: 286rpx;
		@extend .flex,.flex-js-center;
	}
	.goods-info{
		width: 750rpx;
		position: absolute;
		// height: 232rpx;
		// background-color: rgba(0,0,0,0.2);
		@extend .plr-16;
		.info{
			@extend .br-12,.flex,.flex-dir-col;
			//渐变背景色
			background: linear-gradient(90deg, #434976 0%, #232744 100%);
			background-size: 100% 112rpx;
			background-repeat: no-repeat;
			width: 100%;
			>.top{
				height: 88rpx;
			}
			>.bottom{
				@extend .flex-1,.bg-color-white,.br-12,;
			}
		}
	}
}
</style>